<script setup lang='ts'>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { delSetupList, editSet, getSetupList } from '@/views/psychology/set/getSetup';
// 未知
// const form = reactive({
//     name: '',
//     region: '',
//     date1: '',
//     date2: '',
//     delivery: false,
//     type: [],
//     resource: '',
//     desc: ''
// });


// 传过来的参数
const route = useRoute();
console.log(route.query);
const data = route.query.id;
const addVisible = ref(false);
const editVisible = ref(false);
console.log(route.query);
const tableData = ref([]);

const ListData = ref({
    assessmentId: data,
    pageNum: 1,
    pageSize: 10
});

function page() {
    getSetupList(ListData.value).then(res => {
        console.log(res);
        tableData.value = res.rows;

    });
}

page();

function del(data) {
    delSetupList(data.id).then(res => {
        console.log(res);
        page();

    });

}

// 添加
const addSetdata = ref({
    analysis: '',
    /**
     * 测评的id
     */
    assessmentId: data,
    /**
     * 最高分
     */
    highest: 0,
    /**
     * 最低分
     */
    lowest: 0
});

function addSave() {
    // addSet(addSetdata.value).then(res => {
    //     console.log(res);
    //     page();
    // });
    addVisible.value = false;

}

// 编辑
const editData = ref({
    analysis: '',
    /**
     * 测评的id
     */
    id: null,
    /**
     * 最高分
     */
    highest: 0,
    /**
     * 最低分
     */
    lowest: 0
});

function editBtn(data) {
    console.log(data);
    editVisible.value = true;
    editData.value.analysis = data.analysis;
    editData.value.id = data.id;
    editData.value.highest = data.highest;
    editData.value.lowest = data.lowest;
}

function editSetSave() {
    editSet(editData.value).then(res => {
        console.log(res);
        page();
        editVisible.value = false;
    });
}
</script>

<template>
    <div class='container'>
        <header>
            <el-button v-hasPermi="['psychology:set:add']"
                       type='primary' @click='addVisible = true'>添加
            </el-button>
            <!--            添加对话框-->
            <el-dialog v-model='addVisible' title='添加' width='1000'>
                <!--内容-->
                <p>设定分数范围</p>
                <div class='Score'>
                    <el-input v-model='addSetdata.lowest' style='width: 100px' placeholder='分数' />
                    <p>~</p>
                    <el-input v-model='addSetdata.highest' style='width: 100px' placeholder='分数' />
                </div>
                <div class='message'>
                    <p>内容信息</p>
                    <el-input
                        v-model='addSetdata.analysis'
                        maxlength='500'
                        style='width: 100%'
                        placeholder='Please input'
                        show-word-limit
                        type='textarea'
                        :autosize='{ minRows: 16, maxRows: 17 }'
                        resize='none'
                    />
                </div>
                <!--底部-->
                <template #footer>
                    <div class='dialog-footer' align='center'>
                        <el-button @click='addVisible = false'>取消</el-button>
                        <el-button type='primary' @click='addSave'>
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </header>
        <!--表格-->
        <el-table :data='tableData' style='width: 100%' border>
            <el-table-column fixed prop='analysis' label='提示内容' align='center' />
            <el-table-column label='分数范围' width='300' align='center'>
                <template #default='scope'>
                    {{ scope.row.lowest }} ~ {{ scope.row.highest }}
                </template>
            </el-table-column>
            <el-table-column fixed='right' label='操作' width='300' align='center'>
                <template #default='scope'>
                    <el-button v-hasPermi="['psychology:set:edit']" link type='primary' size='small' @click='editBtn((scope.row))'
                    >编辑
                    </el-button
                    >
                    <el-button v-hasPermi="['psychology:set:remove']" link type='primary' size='small' @click='del(scope.row)'>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--编辑-->
        <el-dialog v-model='editVisible' title='编辑' width='1000'>
            <!--内容-->
            <p>设定分数范围</p>

            <div class='Score'>

                <el-input v-model='editData.lowest' style='width: 100px' placeholder='分数' />
                <p>~</p>
                <el-input v-model='editData.highest' style='width: 100px' placeholder='分数' />
            </div>
            <div class='message'>
                <p>内容信息</p>
                <el-input
                    v-model='editData.analysis'
                    maxlength='500'
                    style='width: 100%'
                    placeholder='Please input'
                    show-word-limit
                    type='textarea'
                    :autosize='{ minRows: 16, maxRows: 17 }'
                    resize='none'
                />
            </div>
            <!--底部-->
            <template #footer>
                <div class='dialog-footer' align='center'>
                    <el-button @click='addVisible = false'>取消</el-button>
                    <el-button type='primary' @click='editSetSave'>
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style lang='scss'>
p {
    margin: 10px;
    font-size: 15px;
    font-weight: bold;
}

.Score {
    display: flex;
    justify-content: left;
}

header {
    margin: 20px 0;
}

.container {
    padding: 40px;
}
</style>
